<template>
    <div>
        <div style="margin: 5px">
            <Button @click="btn_refresh" type="primary">刷新</Button> 
        </div>
        <i-table  :columns="format" :data="show_list" :height="sharedState.tableHeight" >
            <template slot-scope="{ row, index }" slot="action">
                <Dropdown trigger="click">
                    <a href="javascript:void(0)">
                        <Icon type="ios-create-outline" size="30" />
                    </a>
                    <DropdownMenu slot="list">
                        <DropdownItem><Button type="primary"  @click="add_taint(index)" long>增加污点</Button></DropdownItem>
                        <DropdownItem><Button type="primary"   @click="add_label(index)" long>打标签</Button></DropdownItem>
                        <DropdownItem><Button type="error"  @click="del_taint(index)" long>删除污点</Button></DropdownItem>
                        <DropdownItem><Button type="error"   @click="del_label(index)" long>删标签</Button></DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </template>
        </i-table>
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
        <!-- 添加污点模态框 -->
        <Modal v-model="show_add_taint_modal" width="600">
            <p slot="header" style="color:#f60;text-align:center">
                {{ node_name }}<span>增加污点</span>
            </p>
            <div style="text-align:center">
                <Form :ref="taint" :model="taint" :rules="rules" label-position="left"  :label-width="100">
                    <Form-Item label="选择污点效果" prop="taint_effect">
                        <Select v-model="taint.effect">
                            <Option v-for="effect in taint_effect_list" :key="effect" :value="effect">{{ effect }}</Option>
                        </Select>
                    </Form-Item> 
                    <Form-Item label="key:"  prop="key">
                        <Input type="text"  v-model="taint.key" />
                    </Form-Item>
                    <Form-Item label="value:" prop="taint_value">
                        <Input type="text"  v-model="taint.value"  />
                    </Form-Item>
                </Form> 
            </div>
            <div slot="footer">
                <Button type="primary" size="large"  @click="btn_add_taint">提交</Button>
            </div>
        </Modal>
        <!-- 删除污点模态框 -->
        <Modal v-model="show_del_taint_modal" width="600">
            <p slot="header" style="color:#f60;text-align:center;">
                {{ node_name }}<span>删除污点</span>
            </p>
            <div style="">
                <Form>
                    <Form-Item >
                        <Radio-Group v-model="taint_del_index" vertical>
                            <Radio v-for="(taint,index) in taints" :label="index" :key="index">{{ taint }}</Radio>
                        </Radio-Group>
                    </Form-Item> 
                </Form> 
            </div>
            <div slot="footer">
                <Button type="primary" size="large"  @click="btn_del_taint">提交</Button>
            </div>
        </Modal>
        <!-- 打标签模态框 -->
        <Modal v-model="show_add_label_modal" width="600">
            <p slot="header" style="color:#f60;text-align:center">
                {{ node_name }}<span>打标签</span>
            </p>
            <div style="text-align:center">
                <Form :ref="label" :model="label" :rules="addLabelRules" label-position="left"  :label-width="100">
                    <Form-Item label="key:"  prop="key">
                        <Input type="text"  v-model="label.key" />
                    </Form-Item>
                    <Form-Item label="value:" prop="value">
                        <Input type="text"  v-model="label.value"  />
                    </Form-Item>
                </Form> 
            </div>
            <div slot="footer">
                <Button type="primary" size="large"  @click="btn_add_label">提交</Button>
            </div>
        </Modal>
        <!-- 删标签模态框 -->
        <Modal v-model="show_del_label_modal" width="600">
            <p slot="header" style="color:#f60;text-align:center;">
                <span>删除标签({{ node_name }}){{label_keys}}</span>
            </p>
            <div style="">
                <Form>
                    <Form-Item >
                        <CheckboxGroup v-model="label_keys" vertical>
                            <Checkbox v-for="(val,key) in labels" :label="key" :key="key">{{ key }}:{{val}}</Checkbox>
                        </CheckboxGroup>
                    </Form-Item> 
                </Form> 
            </div>
            <div slot="footer">
                <Button type="primary" size="large"  @click="btn_del_label">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

import { update_node,get_node_list } from  '@/api'
import { k8s_cluster_post } from '@/api/http'
import { show_simple_page,colors } from '@/common/util'
import store from '@/store'
export default {
    data() {
        return {
            sharedState: store.state,
            format: [
                {
                    title: '节点',key: 'name',

                },
                {
                    title: '类型',key: 'role',
                    render: (h,params) => {
                        let value = params.row.role
                        if(value=='master'){
                            return h('span',{
                                style: {
                                    color: colors['green'],
                                }
                            },'主节点')
                        }else{
                            return h('span',{
                                style: {
                                    color: colors['blue'],
                                }
                            },'工作节点')
                        }
                    }
                },
                {
                    title: '准备就绪',key: 'ready',
                    render: (h,params) => {
                        let value = params.row.ready
                        if(value=='True'){
                            return h('span',{
                                style: {
                                    color: colors['green'],
                                }
                            },'是')
                        }else{
                            return h('span',{
                                style: {
                                    color: colors['red'],
                                }
                            },'未知')
                        }
                    }
                },
                {
                    title: '版本',key: 'node_info',
                    render: (h, params) => {
                        let info = params.row.node_info
                        let k8s_version = info['kube_proxy_version']
                        let docker_version = info['docker_version'].split('//')[1]
                        let kernel = info['kernel_version'].split('-')[0]
                        let value = 'k8s:\t'+ k8s_version +'\n'
                        value += 'docker:\t' + docker_version +'\n'
                        value += "kernel:\t" +kernel +'\n'
                        return h('pre', value)
                    }
                },
                {
                    title: 'cpu',key: 'cpu_total',                    
                    render: (h, params) => {
                        let value = params.row.cpu_total+' c'
                        return h('p',value)
                    }
                },
                {
                    title: '内存',key: 'memory_total',
                    render: (h, params) => {
                        let value = (params.row.memory_total/1024).toFixed(1)+' G'
                        return h('p',value)
                    }
                },
                {
                    title: 'pod',key: 'pod_total',
                    render: (h, params) => {
                        let value = params.row.pod_total+' 个'
                        return h('p',value)
                    }
                },
                {
                    title: '磁盘',key: 'disk_space',
                    render: (h, params) => {
                        let value = params.row.disk_space+' G'
                        return h('p',value)
                    }
                },
                {
                    title: '污点',key: 'taints',
                    render : (h,params) => {
                        let taints = params.row.taints 
                        if (taints == null ){
                            return   h('p','无')
                        }else{
                            let value = JSON.stringify(taints,undefined,4)
                            return h('Poptip', {props:{'trigger':'hover','word-wrap':true,'placement':'right',content:value}},[
                                    h('a', '显示')
                            ]);
                        }
                    }
                },
                {
                    title: '标签',key: 'labels',minWidth:200,maxWidth:400,
                    render: (h, params) => {
                        let labels = params.row.labels
                        delete labels["beta.kubernetes.io/arch"]
                        delete labels["beta.kubernetes.io/os"]
                        delete labels["kubernetes.io/arch"]
                        delete labels["kubernetes.io/hostname"]
                        delete labels["kubernetes.io/os"]
                        delete labels["kubernetes.io/role"]
                        delete labels["route-reflector"]
                        let value = this.json_to_str(labels)
                        return h('pre',value );
                    }
                },
                {
                    title: '地址段',key: 'pod_cidr'
                },
                {
                    title: '创建时间',key: 'create_time'
                },
                {
                    title: '操作',slot: 'action',align: 'center',width:150,
                }
            ],
            rules: {
                effect: [
                    { required: true, message: 'effect', trigger: 'change' }
                ],
                key: [
                    { required: true, message: 'key.', trigger: 'blur' },
                ],
                value: [
                    { required: true, message: 'value.', trigger: 'blur' },
                ]
            },
            total_list: [],
            show_list: [],
            // 分页
            total: 0,
            pageSize: 7,
            // add_taint data
            show_add_taint_modal: false,
            show_del_taint_modal: false,
            show_add_label_modal: false,
            show_del_label_modal: false,
            taint: {
                effect: '',
                key: '',
                value: '',
            },

            taint_effect_list: [ 'NoSchedule','PreferNoSchedule','NoExecute'],
            node_name: '',
            taints:'',
            taint_del_index: '',
            // 打标签
            label: {
                key: '',
                value: '',
            },
            addLabelRules: {
                key: [
                    { required: true, message: '请输入key.', trigger: 'blur' },
                ],
                value: [
                    { required: true, message: '请输入value.', trigger: 'blur' },
                ]
            },
            // 删标签
            labels: '',
            label_keys: [],
        }
    },
    methods: {
        btn_refresh(){
            this.refresh()
        },
        json_to_str(obj){
            let str = JSON.stringify(obj)
            if(str=='{}'){
                return 'null'
            }else{
                let result = ''
                for(let key in obj){
                    result += key+": "+obj[key]+"\n"
                }
                return result
            }
        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        add_taint(index){
            let node_name = this.show_list[index].name;
            this.node_name = node_name
            console.log("add_taint node_name:",node_name)
            this.show_add_taint_modal = true;
        },
        
        // 模态框提交事件
        btn_add_taint(){
            console.log(JSON.stringify(this.taint))
            let data={
                "node_name":this.node_name,
                "action":"add_taint",
                "taint":this.taint
            }
            k8s_cluster_post(update_node,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('添加污点成功')
                    this.show_add_taint_modal = false
                    this.refresh()           
                }else {
                    alert(info)
                }
            })

        },
        // 删除污点点击事件
        del_taint(index) {
            let node_name = this.show_list[index].name;
            let taints = this.show_list[index].taints
            this.node_name = node_name
            this.taints = taints
            this.show_del_taint_modal = true
        },
        
        btn_del_taint(){
            let  taint= this.taints[this.taint_del_index]
            let data={
                "node_name":this.node_name,
                "action":"delete_taint",
                "taint":taint,
            }
            k8s_cluster_post(update_node,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('删除污点成功')
                    this.show_del_taint_modal = false
                    this.refresh()
                }else {
                    alert(info)
                }
            })
        },
        // 点击打标签事件
        add_label(index) {
            let node_name = this.show_list[index].name;
            this.node_name = node_name
            this.show_add_label_modal = true;  
        },
        // 模态框提交事件
        btn_add_label(){
            let key = this.label.key
            let value= this.label.value
            let labels = {}
            labels[key]=value
            let data={
                "node_name":this.node_name,
                "action":"add_labels",
                "labels":labels
            }
            k8s_cluster_post(update_node,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('添加标签成功')
                    this.show_add_label_modal = false
                    this.refresh()
                }else {
                    alert(info)
                }
            })

        },
        // 点击删标签事件
        del_label(index) {
            let node_name = this.show_list[index].name;
            let labels = this.show_list[index].labels
            delete labels["beta.kubernetes.io/arch"]
            delete labels["beta.kubernetes.io/os"]
            delete labels["kubernetes.io/arch"]
            delete labels["kubernetes.io/hostname"]
            delete labels["kubernetes.io/os"]
            delete labels["kubernetes.io/role"]
            delete labels["route-reflector"]
            this.node_name = node_name
            this.labels = labels
            this.show_del_label_modal = true
        },
        // 
        btn_del_label(){
            let keys = this.label_keys
            let labels = {}
            for(let i=0;i<keys.length;i++){
                let key = keys[i]
                let value = this.labels[key]
                labels[key]=value
            }
            let data={
                "node_name":this.node_name,
                "action":"delete_labels",
                "labels":labels
            }
            k8s_cluster_post(update_node,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('删除标签成功')
                    this.show_del_label_modal = false
                    this.refresh()
                }else {
                    alert(info)
                }
            })

        },
        refresh() {
            k8s_cluster_post(get_node_list).then( (response) => {
                show_simple_page(this,response)
            })

        }
    },
    mounted: function() {
        this.refresh()
    }
}
</script>
<style>
    pre{
        white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space:normal!important;
    }
</style>